<template>
  <div class="hello">
    <p>
      css效果，模拟打字动效,支持普通文本效果，cmd命令行效果等，高度可定制
      <br />
      <a href="https://cli.vuejs.org">vue-cli documentation</a>.
    </p>
    <h3>
      效果演示：文本模式
    </h3>

    <typing-animation
      :text="
        '动次打次动次打次动次打次动次打次动次打次，动次打次动次打次动次打次动次打次动，次打次动次打次动次打次'
      "
      :type="'text'"
    ></typing-animation>
    <h3>
      效果演示：命令行模式
    </h3>
    <typing-animation
      :text="
        '动次打次动次打次动次打次动次打次动次打次，动次打次动次打次动次打次动次打次动，次打次动次打次动次打次'
      "
      :type="'cmd'"
    ></typing-animation>
    <h3>效果演示：单行模式</h3>
    <typing-animation
      :text="
        '动次打次-动次打次动次-打次动次打次动次-打次，动次打次动次打次动次打-次动次打次动，次打次动次打次-动次打次'
      "
      :separators="'-'"
      :type="'cmd'"
      :isSingle="true"
    ></typing-animation>
    <p class="author">by @HMS</p>
  </div>
</template>

<script>
import "../assets/iconfont/iconfont";

export default {
  name: "HelloWorld",
  props: {
    msg: String
  },
  data() {
    return {
      isSingle: false,
      type: "cmd",
      isShow: true
    };
  },
  mounted() {},
  methods: {
    changeModel(model) {
      switch (model) {
        case "single":
          this.isSingle = !this.isSingle;
          this.isShow = !this.isShow;

          break;
        case "cmd":
          this.type = "cmd";
          this.isShow = !this.isShow;
          break;
        case "text":
          this.type = "text";
          this.isShow = !this.isShow;
          break;

        default:
          break;
      }
    }
  }
};
</script>

<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
.hello {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.author {
  position: fixed;
  bottom: 20px;
  right: 20px;
}
.show {
  display: none;
}
</style>
